<template>
  <div class="wrapper">
    <!-- 个人信息头部 -->
    <div class="topwrapper">
      <div class="leftdiv">
        <img src="../../../assets/touxiang.png" alt="" />
        <div class="userName">
          <span>{{ userInfoStore.name }}</span>
        </div>
        <div class="userVip">
          <span>普通用户</span>
        </div>
      </div>
      <div class="rightdiv">
        <img src="@/assets/ewm.png" alt="" />
        <div class="VIP">
          <i></i>
          <div class="word">
            <div class="line1">Pro会员</div>
            <div class="line2">立即开通>></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的资产 -->
    <div class="assets">
      <h2 class="mass">我的资产</h2>
      <div class="assetsList">
        <div class="assetsItem">
          <p>0</p>
          <p>余额</p>
        </div>
        <div class="assetsItem">
          <p>0</p>
          <p>红包</p>
        </div>
        <div class="assetsItem">
          <p>0</p>
          <p>优惠券</p>
        </div>
        <div class="assetsItem">
          <p>0</p>
          <p>积分</p>
        </div>
        <div class="assetsItem">
          <p>0</p>
          <p>礼品卡</p>
        </div>
      </div>
    </div>
    <!-- 菜单项 -->
    <div class="listMenu">
      <ul class="menu">
        <li class="item">
          <div class="tubiao">
            <van-icon name="orders-o" size="40" />
          </div>
          <div>
            <a href="#">我的订单</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="friends-o" size="40" />
          </div>
          <div>
            <a href="#">账号管理</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="phone-circle-o" size="40" />
          </div>
          <div>
            <a href="#">我的手机</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="listMenu">
      <ul class="menu">
        <li class="item">
          <div class="tubiao">
            <van-icon name="vip-card-o" size="40" />
          </div>
          <div>
            <a href="#">一起拼单</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="friends-o" size="40" />
          </div>
          <div>
            <a href="#">售后服务</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="chat-o" size="40" />
          </div>
          <div>
            <a href="#">邀请返利</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="listMenu">
      <ul class="menu">
        <li class="item">
          <div class="tubiao">
            <van-icon name="medal-o" size="40" />
          </div>
          <div>
            <a href="#">优先购</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="orders-o" size="40" />
          </div>
          <div>
            <a href="#">积分中心</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="vip-card-o" size="40" />
          </div>
          <div>
            <a href="#">会员俱乐</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="listMenu">
      <ul class="menu">
        <li class="item">
          <div class="tubiao">
            <van-icon name="cluster-o" size="40" />
          </div>
          <div>
            <a href="#">地址管理</a>
          </div>
        </li>
        <li class="item">
          <div class="tubiao">
            <van-icon name="cash-back-record" size="40" />
          </div>
          <div>
            <a href="#">支付安全</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="exit">
      <van-button type="default" size="large" @click="logoutHandler">退出登录</van-button>
    </div>  
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
// 引入仓库
import { useUserInfoStore } from "@/stores/userInfo";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog } from "vant";
const router = useRouter();
const userInfoStore = useUserInfoStore();
// 弹出层
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
onMounted(async () => {
  await userInfoStore.getInfo();
});
// 退出登录
const logoutHandler = () => {
  // 调用vant弹出框
  showConfirmDialog({
    title:'退出登录?',
    confirmButtonColor:'#dd1a21',
  })
  // 点击弹框确定的回调
  .then(async () => {
    // 调用store中的退出登录
    await userInfoStore.logout()
    // 跳转主页
    router.push({name:'Home'})
  })
  // 点击弹框取消按钮的回调
  .catch(() => {
    return
  })
};

</script>
<style scoped lang="scss">
.wrapper {
  height: 100%;
  .assets {
    .mass {
      margin-left: 0.3rem;
      border-bottom: 0.01rem solid #d9d9d9;
      text-align: left;
      line-height: 1.04rem;
      font-size: 0.28rem;
    }
    .assetsList {
      position: relative;
      text-align: center;
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      .assetsItem {
        position: relative;
        padding-top: 0.32rem;
        height: 1.6rem;
        flex-shrink: 0;
        -webkit-box-flex: 1;
        flex-grow: 1;
        p {
          font-size: 0.4rem;
        }
        menuitem {
          display: block;
          height: 3rem;
          padding-top: 0.45rem;
          text-align: center;
        }
      }
    }
  }
  .exit {
    margin: 0.7rem 0.2rem;
    
  }
}

.wrapper .topwrapper {
  width: 100%;
  height: 144px;
  background-image: url("@/assets/bg.png");
  background-repeat: repeat-x;
  background-position-x: right;
  display: flex;
}

.wrapper .topwrapper .leftdiv {
  flex: left;
  width: 258px;
  height: 143px;

  text-align: center;
}

.topwrapper .leftdiv img {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin-top: 20px;
  margin-left: -155px;
  margin-top: 40px;
}

.topwrapper .leftdiv .userName {
  margin-top: -60px;
  margin-bottom: 5px;
}
.topwrapper .leftdiv .userName span {
  font-size: 0.38rem;
}

.topwrapper .leftdiv .userVip {
  font-size: 10px;
}

.topwrapper .rightdiv {
  display: flex;
  position: static;
  top: 40px;
}

.topwrapper .rightdiv img {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 30px;
  right: 15px;
}

.topwrapper .rightdiv .word {
  position: absolute;
  top: 85px;
  right: 0;
  font-size: 15px;
  background-color: rgb(53, 53, 53);
  border-radius: 5%;
  padding-left: 30px;
}

.topwrapper .rightdiv .word .line1 {
  color: gold;
}

.topwrapper .rightdiv .word .line2 {
  color: gold;
}
.wrapper .assetList {
  margin-top: 0.5rem;
  display: flex;
  width: 100%;
  height: 85px;
}

.wrapper .assetList .assetItem {
  flex: 1;
  margin-left: 13px;
  margin-top: 20px;
}

.wrapper .assetList .assetItem span {
  margin-left: 13px;
}

.hongbao img {
  width: 368px;
  height: 51px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.wrapper .menu {
  width: 100%;
  height: 275px;
  display: flex;
  flex-wrap: wrap;
}

.listMenu {
  height: 97px;
}

.wrapper .menu .item {
  width: 123px;
  height: 97px;
  background-color: #fafafa;
  border: 1px solid #eaeaea;
}

.wrapper .menu .tubiao {
  margin-top: 20px;
  margin-left: 45px;
}

.wrapper .menu a {
  color: #333;
  margin-left: 33px;
  font-size: 20px;
}
</style>
